/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { ref, defineComponent, watch } from 'vue';
import {
  getSpanProps,
  useNamespace,
  useCodeListListen,
} from '@ibiz-template/vue3-util';
import './step-codelist.scss';
import { CodeListItem } from '@ibiz-template/runtime';
import { StepCodelistController } from './step-codelist.controller';

export const StepCodeList = defineComponent({
  name: 'StepCodeList',
  props: getSpanProps<StepCodelistController>(),
  setup(props, { emit }) {
    const ns = useNamespace('step-codelist');

    const c = props.controller;

    const codeList = c.codeList;

    const { valueFormat, unitName } = c.parent;

    // 代码表数据
    const items = ref<readonly CodeListItem[]>([]);
    if (codeList) {
      watch(
        () => props.data,
        newVal => {
          c.loadCodeList(newVal).then(_codeList => {
            items.value = _codeList;
          });
        },
        {
          immediate: true,
          deep: true,
        },
      );
    }

    const fn = (data: CodeListItem[] | undefined) => {
      if (data) {
        items.value = data;
      }
    };

    useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);

    // 绘制步骤
    const renderStep = () => {
      const currentIndex = items.value.findIndex(
        (item: IData) => item.value === props.value,
      );
      return items.value.map((item: IData, index: number) => {
        return (
          <div
            class={[
              ns.e('code-step'),
              ns.is('finished', currentIndex > index),
              ns.is('actived', currentIndex === index),
              ns.is('unactived', currentIndex < index),
            ]}
            title={item.text}
          >
            <div class={ns.e('code-item')}>
              {currentIndex > index ? (
                <ion-icon
                  class={ns.em('code-item', 'finished')}
                  name='checkmark-outline'
                ></ion-icon>
              ) : (
                <div
                  class={
                    currentIndex === index
                      ? ns.em('code-item', 'actived')
                      : ns.em('code-item', 'unactived')
                  }
                >
                  {index}
                </div>
              )}
              {index < items.value.length - 1 && (
                <div
                  class={[
                    ns.em('code-item', 'line'),
                    ns.is('actived', currentIndex > index),
                  ]}
                ></div>
              )}
            </div>
            {currentIndex === index && (
              <div class={ns.em('code-step', 'text')}>{item.text}</div>
            )}
          </div>
        );
      });
    };

    return {
      ns,
      c,
      items,
      valueFormat,
      unitName,
      renderStep,
    };
  },
  render() {
    let content = null;

    if (this.c.codeList) {
      content = (
        <div class={this.ns.e('content')}>
          <div class={this.ns.em('content', 'step')}>{this.renderStep()}</div>
        </div>
      );
    } else {
      content = this.value;
    }

    return <span class={[this.ns.b()]}>{content}</span>;
  },
});
